<!-- 即时聊天小组展示按钮 -->
<template>
	<view
		@click="$_To('group/group?gid=' + Gid)"
		:style="'order:'+Order+';'+Css"
		class="block-live-chat">
		<template v-if="group">
			<view class="_left">
				<template v-if="group.followType == 1">
					<template v-if="listFollowUser.length">
						<view v-for="item in listFollowUser">
							<image :src="item.avatar" mode="widthFix"></image>
						</view>
					</template>
					<template v-else>
						<view></view><view></view><view></view><view></view><view></view><view></view><view></view><view></view><view></view>
					</template>
				</template>
				<template v-if="group.followType == 3">
					<view>?</view>
					<view>?</view>
					<view>?</view>
					<view>?</view>
					<view>?</view>
					<view>?</view>
					<view>?</view>
					<view>?</view>
					<view>?</view>
				</template>
			</view>
			<view class="_right">
				<view class="_rightTop">
					<view class="_gname">{{group.gname}}</view>
					<view class="_time">
						<template v-if="group.followType == 1">
							<template v-if="newPost">
								<template v-if="newPost != '需要加入本小组才能查看哟'">
									{{newPost.createdTimeAgo}}
								</template>
							</template>
						</template>
					</view>
				</view>
				<view class="_rightBottom">
					<view class="_new-post">
						<template v-if="group.followType == 1">
							<template v-if="newPost == '需要加入本小组才能查看哟'">
								需要加入本小组才能查看哟
							</template>
							<template v-else>
								<template v-if="newPost">
									{{newPost.author.nickname}}：{{$_filterHtml(newPost.content)}}
								</template>
							</template>
						</template>
						<template v-if="group.followType == 3">
							<template v-if="newPost == '需要加入本小组才能查看哟'">
								需要加入本小组才能查看哟
							</template>
							<template v-else>
								<template v-if="newPost">
									{{newPost.author.nickname}}：{{$_filterHtml(newPost.content)}}
								</template>
							</template>
						</template>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="skeleton-screen">
				<view class="_lefts loading-css"></view>
				<view class="_rights loading-css"></view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name:"block-live-chat",
		props:{
			Order: {
				type: Number,
				default: ""
			},
			Gid: {
				type: String,
				default: ""
			},
			Css: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				group:null,
				listFollowUser:[],
				newPost:null
			};
		},
		mounted(){
			this.getGroup();
		},
		methods:{
			// 请求小组详情
			getGroup(){
				this.$_Request(
					"GET","/api/v2/group/" + this.Gid + "/detail",
					{
						"whitelistKeys":"followType,gname,createdTimeAgo,description,interaction.followStatus,canViewContent"
					},
					(res) => {
						this.group = res.data.data.detail;
						// 原生关注方式
						if(this.group.followType == 1 || this.group.followType == 3){
							this.getFollowUser();
						}
					}
				)
			},
			// 请求关注小组的用户
			getFollowUser(){
				this.$_Request(
					"GET","/api/v2/group/" + this.Gid + "/interaction/followers",
					{
						"pageSize":9, 
						"whitelistKeys":"avatar"
					},
					(res) => {
						this.listFollowUser = res.data.data.list;
						// 获取最新一条帖子
						this.getNewPost();
					}
				)
			},
			// 获取最新一条帖子
			getNewPost(){
				this.$_Request(
					"GET","/api/v2/post/list",
					{
						"whitelistKeys":"createdTimeAgo,content,author.nickname",
						"gid":this.Gid,
						"pageSize":1
					},
					(res) => {
						if(res.data.message == '[37103] 只有小组成员才能查看小组内帖子'){
							this.newPost = "需要加入本小组才能查看哟"
						}else{
							this.newPost = res.data.data.list[0];
						}
					}
				)
			},
		},
	}
</script>

<style lang="scss" scoped>
.block-live-chat{
	display: flex;
	align-items: center;
	justify-content: center;
	._left{
		width: 100rpx;
		height: 100rpx;
		overflow: hidden;
		background: #FFF;
		box-shadow: 0 0 1rpx #999;
		border-radius: 5rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		flex-shrink: 0;
		view{
			width: 27rpx;
			height: 27rpx;
			overflow: hidden;
			margin: 0;
			padding: 0;
			border-radius: 5rpx;
			background: $BianKuangSe;
			font-size: 18rpx;
			line-height: 18rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				display: block;
				margin: 0;
			}
		}
		view:nth-child(2),view:nth-child(5),view:nth-child(8){
			margin: 0 7rpx 0 7rpx;
		}
	}
	._right{
		flex: 1;
		margin-left: 15rpx;
		._rightTop{
			display: flex;
			align-items: center;
			._gname{
				flex: 1;
				font-size: 32rpx;
				line-height: 32rpx;
				display: -webkit-box;
				/*!autoprefixer:off*/
				-webkit-box-orient: vertical;
				/*autoprefixer:on*/
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
			._time{
				flex-shrink: 0;
				font-size: 28rpx;
				line-height: 28rpx;
				color: $ZhanWeiSe;
			}
		}
		._rightBottom{
			display: flex;
			align-items: center;
			padding-top: 15rpx;
			._new-post{
				flex: 1;
				font-size: 28rpx;
				line-height: 28rpx;
				color: $ZhanWeiSe;
				display: -webkit-box;
				/*!autoprefixer:off*/
				-webkit-box-orient: vertical;
				/*autoprefixer:on*/
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		}
	}
}
.skeleton-screen{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	._lefts{
		width: 100rpx;
		height: 100rpx;
		margin-right: 5rpx;
	}
	._rights{
		flex: 1;
		height: 100rpx;
		margin-left: 15rpx;
	}
}
</style>